import React, { Component } from 'react'
import { Button, Divider, Popconfirm, Table, Tag } from 'antd'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import StudentTagModal from '../../../common/tag/tag-modal'
import { FormattedMessage } from 'react-intl'
import {getStudentTagsByProgramId, addStudentTag, editStudentTag, deleteStudentTag} from '../../../../actions/student-tag'

class StudentTagPane extends Component {
  constructor (props) {
    super(props)
    this.state = {
      modalVisible: false,
      tagColor: '',
      tagName: '',
      isEdit: false,
      assignmentQuizTagId: ''
    }
  }

  componentDidMount () {
    const {programId} = this.props
    this.props.getStudentTagsByProgramId(programId)
  }

  handleDelete (assignmentQuizTagId) {
    this.props.deleteStudentTag(assignmentQuizTagId, this.props.programId)
  }

  handleEdit (record) {
    this.setState({
      tagColor: record.color,
      tagName: record.name,
      assignmentQuizTagId: record.id,
      isEdit: true,
      modalVisible: true
    })
  }

  createNewTab () {
    this.setState({
      tagColor: 'default',
      tagName: '',
      assignmentQuizTagId: '',
      isEdit: false,
      modalVisible: true
    })
  }

  setModalVisible (modalVisible) {
    this.setState({modalVisible})
  }

  setTagName (tagName) {
    this.setState({ tagName })
  }

  setTagColor (tagColor) {
    this.setState({ tagColor })
  }

  handleAddStudentTag () {
    const {tagName, tagColor} = this.state
    const {programId} = this.props
    this.props.addStudentTag(tagColor, tagName, programId)
    this.setState({ modalVisible: false })
  }
  handleEditStudentTag () {
    const {tagName, tagColor, assignmentQuizTagId} = this.state
    const {programId} = this.props
    this.props.editStudentTag(assignmentQuizTagId, tagColor, tagName, programId)
    this.setState({ modalVisible: false })
  }
  render () {
    const columns = [{
      title: 'Tag',
      dataIndex: 'name',
      key: '1',
      render: (text, record) => (
        <Tag color={record.color === 'default' ? '' : record.color}>{text}</Tag>
      )
    }, {
      title: <FormattedMessage id='创建时间' />,
      dataIndex: 'createTime',
      key: '3',
      render: (text) => (<span>{new Date(text).toLocaleDateString()}</span>)
    }, {
      title: <FormattedMessage id='创建人' />,
      key: '4',
      dataIndex: 'creator'
    }, {
      title: <FormattedMessage id='操作' />,
      key: '5',
      render: (text, record) => (
        <span>
          <a onClick={this.handleEdit.bind(this, record)}><FormattedMessage id='编辑' /></a>
          <Divider type='vertical' />
          <Popconfirm title={<FormattedMessage id='确认删除？(删除后，所有引用此tag的信息都将被删除)' />} okText='Yes' cancelText='No'
            onConfirm={this.handleDelete.bind(this, record.id)}>
            <a><FormattedMessage id='删除' /></a>
          </Popconfirm>
        </span>
      )
    }]
    const userTags = this.props.userTags
    const {modalVisible, tagName, tagColor, isEdit} = this.state

    return (<div>
      <Button className='margin-t-1 margin-b-1' type='primary' onClick={this.createNewTab.bind(this)}>
        <FormattedMessage id='创建Tag' />
      </Button>

      <Table columns={columns} dataSource={userTags} rowKey={record => record.id} />
      <StudentTagModal
        modalVisible={modalVisible}
        isEdit={isEdit}
        tagName={tagName}
        tagColor={tagColor}
        setModalVisible={this.setModalVisible.bind(this)}
        setTagName={this.setTagName.bind(this)}
        setTagColor={this.setTagColor.bind(this)}
        handleAddTag={this.handleAddStudentTag.bind(this)}
        handleEditTag={this.handleEditStudentTag.bind(this)}
      />
    </div>)
  }
}
const mapStateToProps = ({userTags}) => ({
  userTags
})
const mapDispatchToProps = dispatch => ({
  getStudentTagsByProgramId: (programId) => dispatch(getStudentTagsByProgramId(programId)),
  addStudentTag: (tagColor, tagName, programId) => dispatch(addStudentTag(tagColor, tagName, programId)),
  editStudentTag: (tagId, tagColor, tagName, programId) => dispatch(editStudentTag(tagId, tagColor, tagName, programId)),
  deleteStudentTag: (tagId, programId) => dispatch(deleteStudentTag(tagId, programId))
})
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(StudentTagPane))
